<template>
  <view class="service-list flex flex-between flex-wrap">
    <view
      class="service-item"
      v-for="(item, index) in list"
      :key="index"
      @click="toDetail(item)"
    >
      <image :src="item.image" mode="aspectFill" />
      <view class="service-title text-line">
        {{ item.storeName }}
      </view>
      <view class="service-tag text-line">
        {{ item.storeInfo }}
      </view>
      <view class="service-price flex flex-between flex-middle">
        <view class="price">
          <text>￥</text>
          {{ item.price }}
        </view>
        <view class="tips">
          {{ `已售${item.sales}` }}
        </view>
      </view>
      <view class="btn flex flex-bottom flex-between">
        <view class="vip-price">
          {{ ` 会员价￥${item.vipPrice}` }}
        </view>
        <view class="clock"> 立即预约 </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  methods: {
    toDetail(item) {
      this.$navigateTo(`/pages/service/detail?id=${item.id}`);
    },
  },
};
</script>

<style scoped lang="scss">
.service-list {
  margin-top: 12px;
}

.service-item {
  width: 49%;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(107, 107, 107, 0.15);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  padding-bottom: 16px;

  .btn {
    padding: 0 12px;
    margin-top: 12px;

    .vip-price {
      color: #fa6400;
      font-size: 10px;
      border: 1px solid #fa6400;
      border-radius: 2px;
      height: 14px;
      line-height: 14px;
      padding: 0 4px;
    }

    .clock {
      color: #31bc4e;
      font-size: 12px;
    }
  }

  .service-price {
    padding: 0 12px;
    margin-top: 8px;

    .price {
      color: #fa6400;
      font-size: 18px;
      height: 18px;
      line-height: 18px;

      text {
        font-size: 12px;
        margin-top: -2px;
      }
    }

    .tips {
      font-size: 10px;
      color: #979797;
    }
  }

  .service-tag {
    color: #979797;
    font-size: 11px;
    padding: 0 12px;
    margin-top: 2px;
  }

  .service-title {
    margin-top: 8px;
    padding: 0 12px;
    color: #232323;
  }

  image {
    width: 100%;
    height: 112px;
  }
}
</style>